<template>
  <div class="home">
    <!-- 论坛版块 -->
    <div class="post-block">
      <h2>版块导航</h2>
      <ul>
        <li v-for="item in postblock" :key="item.id">
          <router-link
            :to="{
              name: 'PostList',
              query: {
                id: item.id,
              },
            }"
          >
            <img :src="item.coverImage | imgUrl" alt="" />
            <p>{{ item.name }}</p>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 最新帖子 -->
    <div class="post-new">
      <h2>最新帖子</h2>
      <ul>
        <li v-for="item in postnew" :key="item.id">
          <router-link
            :to="{
              name: 'Post',
              query: {
                id: item.id,
              },
            }"
            >{{ item.name }}
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 最热 -->
    <div class="post-hot">
      <h2>热门帖子</h2>
      <ul>
        <li v-for="item in posthot" :key="item.id">
          <router-link
            :to="{
              name: 'Post',
              query: {
                id: item.id,
              },
            }"
            >{{ item.name }}
          </router-link>
        </li>
      </ul>
    </div>
    <router-link
      :to="{
        name: 'NewPost',
      }"
      ><i class="fa fa-plus-square" aria-hidden="true"></i>
    </router-link>
  </div>
</template>

<script>
// 引入封装好的网络请求方法
import { loadPostBlock } from "../services/postBlock";
import { postHot, postNew } from "../services/posts";
export default {
  name: "Home",
  data() {
    return {
      postblock: [],
      posthot: [],
      postnew: [],
    };
  },
  components: {},
  created() {
    loadPostBlock().then((res) => this.postblock.push(...res.data));
    postHot().then((res) => this.posthot.push(...res.data));
    postNew().then((res) => this.postnew.push(...res.data));
  },
};
</script>
<style scoped>
h2 {
  font-style: italic;
  width: 95%;
  margin: 10px auto;
  padding: 10px 5px;
  background: pink;
  /* 帖子版块 */
}
.post-block {
  min-height: 400px;
  border-bottom: 2px solid #999;
}
.post-block ul {
  width: 100%;
  height: 350px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  list-style: none;
}
.post-block img {
  width: 40vw;
  height: 17vh;
}
/* 最新帖子 */

.post-new {
  border-bottom: 2px solid #999;
}
.post-new ul {
  width: 100%;
}
.post-new ul li {
  text-align: left;
  padding: 15px 0px;
  /* border-left: 2px solid red; */
}
.post-new ul li a {
  padding-left: 10px;
  border-left: 5px solid brown;
}

/* 热门帖子 */

.post-hot {
}
.post-hot ul {
  width: 100%;
}
.post-hot ul li {
  text-align: left;
  padding: 15px 0px;
  /* border-left: 2px solid red; */
}
.post-hot ul li a {
  padding-left: 10px;
  border-left: 5px solid brown;
}

i {
  font-size: 45px;
  position: fixed;
  color: skyblue;
  right: 1.533333rem;
  bottom: 5rem;
}
</style>
